<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2021/3/30
  Time: 20:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>会员注册</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/message2.css">
</head>
<body>
<%--设置一个流体容器--%>
<div class="container">
    <%--行--%>
    <div class="row">
        <div class="col-lg-12">
            <div class="jumbotron jumbotron-fluid">
                <div class="container">
                    <h1 class="display-4">宇峰健康商城</h1>
                    <p class="lead">您现在处于会员注册页面<b>(只有成为会员才能预约服务)</b>:</p>
                </div>
            </div>
        </div>
    </div>
    <%--行--%>
    <div class="row">
        <div class="col-lg-9 offset-3">
            <div id="app">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="档案编号:">
                        <el-input v-model="form.fileNumber" style="width: 46%;"></el-input>
                    </el-form-item>
                    <el-form-item label="成员姓名:">
                        <el-input v-model="form.name" style="width: 46%;"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="form.sex">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="身份证:">
                        <el-input v-model="form.idCard" style="width: 46%;"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码:">
                        <el-input v-model="form.PhoeNumber" style="width: 46%;"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱:">
                        <el-input v-model="form.email" style="width: 46%;"></el-input>
                    </el-form-item>
                    <el-form-item label="生日:">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday"
                                            style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit(form)">立即注册</el-button>
                        <a href="${pageContext.request.contextPath}/page.jsp">
                            <el-button>取消</el-button>
                        </a>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/message.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/vue.js"></script>
<script src="${pageContext.request.contextPath}/static/js/axios-0.18.0.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data() {
            return {
                form: {
                    fileNumber: "",
                    name: "",
                    sex: "",
                    idCard: "",
                    PhoeNumber: "",
                    email: "",
                    birthday: ""

                }
            }
        }, methods: {
            open2() {
                this.$message({
                    message: '会员注册成功!',
                    type: 'success'
                });
            },
            open4() {
                this.$message.error('会员注册失败!');
            }
            , onSubmit(form) {
                axios.post('/user/addMember/', {
                    "fileNumber": form.fileNumber,
                    "name": form.name,
                    "sex": form.sex,
                    "idCard": form.idCard,
                    "phoneNumber": form.PhoeNumber,
                    "email": form.email,
                    "birthday": form.birthday
                }).then(data => {
                    if (data.data=="true" || data.data==true){
                        this.a();
                    }else {
                        this.open4();
                    }
                }).catch(e => {
                    this.open4();
                });
            },a(){
                window.location.href="${pageContext.request.contextPath}/login.jsp";
            }
        }
    });
</script>
</html>
